<template>
  <div class="Cangkushezhi">
    <div class="sTop">
        &nbsp;&nbsp;&nbsp;&nbsp;仓库类型：<el-select v-model="value" placeholder="请选择仓库类型" size="small">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;仓库名称：<el-input placeholder="请输入仓库名称" v-model="input" size="small" clearable></el-input>
        &nbsp;<el-button type="primary" size="small" icon="el-icon-search" class="button1 detail">查询</el-button>
        <el-button type="primary" size="small" icon="el-icon-refresh-right" class="button1 rePassword">重置</el-button>
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" class="button2 addUser" @click="centerDialogVisible2 = true">新增仓库</el-button>
    </div>

    <el-table
    :data="tableData"
    border
    stripe
    :row-style="{ height: '60px', padding: '0 0' }"
    style="width: 100%">
        <el-table-column
        align="center"
        type="selection">
        </el-table-column>
        <el-table-column
        prop="entrepotPort"
        label="仓库类型"
        align="center"
        >
        </el-table-column>
        <el-table-column
        prop="entrepotName"
        label="仓库名称"
        align="center"
        >
        </el-table-column>
        <el-table-column
        prop="entrepotAddress"
        label="仓库地址"
        align="center"
        >
        </el-table-column>
        
        <el-table-column label="操作" 
        align="center"
        width="200">
            <template slot-scope="scope">        
                <el-button class="addUser" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button class="rePassword" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>            
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        :page-size="pageShow"  
        :current-page="pageNow"
        layout="prev, pager, next,sizes"
        :page-sizes="[2, 3, 5, 10]"
        @current-change="pageChange"
        @size-change="sizeChange"
        @prev-click="back()"
        @next-click="next()"
        :total="pageNumber">
    </el-pagination>
    <!-- 新增仓库 -->
    <el-dialog
      title="新增仓库"
      :visible.sync="centerDialogVisible2"
      width="30%"
      center>
      <el-form :model="insertOneArr" ref="insertOneArr" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="仓库类型"
          prop="entrepotPort" 
        >
          <el-input type="entrepotPort" v-model="insertOneArr.entrepotPort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="仓库名称"
          prop="entrepotName" 
        >
          <el-input type="entrepotName" v-model="insertOneArr.entrepotName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="仓库地址"
          prop="entrepotAddress" 
        >
          <el-input type="entrepotAddress" v-model="insertOneArr.entrepotAddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRepository">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改仓库信息 -->
    <el-dialog
      title="修改仓库信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-form :model="managerInformation" ref="managerInformation" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item
          label="仓库编号"
          prop="entrepotId"
        >
          <el-input type="name" v-model.number="managerInformation.entrepotId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="仓库类型"
          prop="entrepotPort" 
        >
          <el-input type="entrepotPort" v-model="managerInformation.entrepotPort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="仓库名称"
          prop="name" 
        >
          <el-input type="age" v-model="managerInformation.entrepotName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="仓库地址"
          prop="entrepotAddress" 
        >
          <el-input type="entrepotAddress" v-model="managerInformation.entrepotAddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
  <!-- 删除管理员对话框 -->
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    >
    <i class="el-icon-warning"></i><span>确认删除此仓库吗</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="deleteManager">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import repository from '@/api/repository.js'
  export default {
    data() {
      return {
        input: '',
        repositoryId:'', //删除仓库用 ID
        pageNow: 1, /* 当前页数 */
        pageNumber: 50, /* 总页数 */
        pageShow: 10, /* 每页显示个数 */
        centerDialogVisible2: false,
        centerDialogVisible: false,
         dialogVisible: false,
        managerArr:[],
        insertOneArr:{
          entrepotPort:'',
          entrepotName:'',
          entrepotAddress:'',
        },  //添加用对象
        tableData: [
            {
                type:'自家仓库',
                name:'临时仓库',
                address:'内场仓库'
            },
            {
                type:'自家仓库',
                name:'荷花路',
                address:'荷花路6号'
            },
            {
                type:'电力公司仓库',
                name:'神州',
                address:'神州路33号'
            },
        ], //渲染到表格的数据
        options: [{     //select 选项
          value: '1',
          label: '自家仓库'
        }, {
          value: '2',
          label: '电力公司仓库'
        }],
        value: '',  //select当前选定的 option
        managerInformation: {
          
        },
        rules:{
          
        }
      }
    },
    created(){
       repository.getRepository(this.pageNow,this.pageShow).then(res => {
         /* console.log(res); */
         this.managerArr = res.data.data.list;
         this.pageNumber = res.data.data.total
         this.tableData = this.managerArr
       })
    },
    methods:{
      //pageSize改变
      sizeChange(i){
          this.pageShow = i
          //获取用户列表
       repository.getRepository(this.pageNow,this.pageShow).then(res => {
         /* console.log(res); */
         this.managerArr = res.data.data.list;
         this.pageNumber = res.data.data.total
         this.tableData = this.managerArr
       })
      },
      //点击页码 
      pageChange(i){
        this.pageNow = i
        //获取用户列表
       repository.getRepository(this.pageNow,this.pageShow).then(res => {
         /* console.log(res); */
         this.managerArr = res.data.data.list;
         this.pageNumber = res.data.data.total
         this.tableData = this.managerArr
       })
      },
      //上一页
      back(){
        this.pageNow--
      },
      //下一页
      next(){
        this.pageNow++
      },
      //新增仓库
      addRepository(){
          repository.addRepository(this.insertOneArr).then(res=>{
            /* console.log(res); */
            this.centerDialogVisible2 = false
            location.reload()
          })
      },
      /* 修改 */
      handleEdit(i,v){
        this.centerDialogVisible = true;
        this.managerInformation = v
      },

      /*修改*/
      update(){
        this.centerDialogVisible = false;
        repository.updateRepository(this.managerInformation).then(res => {
         /*  console.log(res); */
         location.reload()
        })
      },

      /*删除仓库*/ 
      handleDelete(i,v){
        this.dialogVisible = true
        this.repositoryId = v.entrepotId
      },
      /*删除仓库*/
      deleteManager(){
        this.dialogVisible = false
        repository.deleteRepository(this.repositoryId).then(res => {
          /* console.log(res); */
          location.reload()
        })
      }
    },
    
  }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .Cangkushezhi{
        background-color: white;
    }
    .el-input{
        width: 200px;
        margin-right: 10px;
    }
    .sTop{
        padding-top: 20px;
        font-size: 14px;
        margin-bottom: 40px;
    }
    .el-table thead{
        background-color: #F5F7FA;
    }
    .has-gutter .is-leaf .cell{
        text-align: center;
        padding-left: 10px;
        width: 150px;
    }
    .el-pagination{
        margin-top: 20px;
        text-align: center;
    }
    .el-icon-warning{
      color: orange;
      font-size: 20px;
      margin-right: 5px;
    }
    
    .sTop >>> .button1{
      text-align: center;
      width: 78px;  height: 32px;
    }
    .sTop >>> .button2{
      text-align: center;
      width: 118px;  height: 32px;
    }
    .sTop >>> .button1,.button2{
        font-size: 14px;
    }
    .is-plain{
      width: 80px;
    }
    .dialog-footer .el-button--default,.el-button--primary{
      width: 74px;  height: 40px;
    }
</style>